<template>
	<view class="zh-goods-detail">
		<view class="cover-img">
			<swiper
				class="swiper"
				circular
			>
				<swiper-item v-for="item in goodsData.detail.wpggAFileDataList" :key="item.id">
					<view class="swiper-item">
						<image :src="previewImg(item.url)" class="banner"/>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="detail">
			<view class="top display-flex justify-between align-center">
				<view class="display-flex align-center">
					<text class="font-bold font-32 font-FF661B">{{ goodsData.detail.price?'¥' + goodsData.detail.price:'电议' }}</text>
					<text class="font-26 font-FF661B" v-if="goodsData.detail.price">/吨</text>
					<view v-if="goodsData.detail.startingWeight" class="top-tags ml-20">{{goodsData.detail.startingWeight + '吨起订'}}</view>
				</view>
				<view >
					<text class="font-999 font-22">可售：{{ goodsData.detail.upShelvesWeight }}吨</text>
				</view>
			</view>
			<view class="center display-flex align-center">
				<view class="center-tags font-20">自营</view>
				<view class="font-36 font-bold ml-10">{{ goodsData.detail.spzs}}</view>
			</view>
			<view class="display-flex align-center font-666 font-20 mt-40">
				<text class="font-666 font-20">{{goodsData.detail.updateTime}}</text>
				<text class="ml-10 mr-10">|</text>
				<text>{{ goodsData.detail.sheng + goodsData.detail.shi }}</text>
				<text class="ml-10 mr-10">|</text>
				<text>{{ goodsData.detail.spckmc }}</text>
			</view>
		</view>
		<view class="sku">
			<view class="font-302D2D font-30 font-bold">货物参数</view>
			<view class="display-flex align-center flex-wrap font-26">
				<view class="item" v-show="goodsData.detail.wpggA">
					<text class="font-999 name">纱支</text>
					<text class="font-302d2d">{{ goodsData.detail.wpggA }}</text>
				</view>
				<view class="item" v-show="goodsData.detail.spcd">
					<text class="font-999 name">品牌</text>
					<text class="font-302d2d">{{ goodsData.detail.spcd }}</text>
				</view>
				<view class="item" v-show="goodsData.detail.wpggD">
					<text class="font-999 name">用途</text>
					<text class="font-302d2d">{{ goodsData.detail.wpggD }}</text>
				</view>
				<view class="item" v-show="goodsData.detail.wpggE">
					<text class="font-999 name">产地</text>
					<text class="font-302d2d">{{ goodsData.detail.wpggE }}</text>
				</view>
				<view class="item" v-show="goodsData.detail.wpggB">
					<text class="font-999 name">工艺</text>
					<text class="font-302d2d">{{ goodsData.detail.wpggB }}</text>
				</view>
				<view class="item" v-show="goodsData.detail.wpggC">
					<text class="font-999 name">工序</text>
					<text class="font-302d2d">{{ goodsData.detail.wpggC }}</text>
				</view>
				<view class="item" v-show="goodsData.detail.wpggF">
					<text class="font-999 name">漂染性</text>
					<text class="font-302d2d">{{ goodsData.detail.wpggF }}</text>
				</view>
				<view class="item" v-show="goodsData.detail.wpggH">
					<text class="font-999 name">颜色</text>
					<text class="font-302d2d">{{ goodsData.detail.wpggH }}</text>
				</view>
				<view class="item" v-show="goodsData.detail.spjsl">
					<text class="font-999 name">件重</text>
					<text class="font-302d2d">{{ goodsData.detail.spjsl }}kg</text>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="title font-302D2D font-30 font-bold">货物描述</view>
			<view class="des">
				<text class="mb-30">{{goodsData.detail.remark}}</text>
				<image :src="previewImg(item.url)" v-for="item in goodsData.detail.fileDataList" :key="item.id" class="des-img" mode="widthFix"></image>
			</view>
		</view>
		<view class="intro">
			<view class="title font-302D2D font-30 font-bold">交易说明</view>
			<view class="sub-title display-flex align-center">
				<image src="@/static/icons/purchase_home_icon.png" class="purchase-home-icon"/>
				<text class="font-30 font-bold font-302D2D ml-15">关于仓库</text>
			</view>
			<view class="content display-flex align-start">
				<view class="left">
					<text class="font-FF661B dot">•</text>
				</view>
				<view class="right">
					<text class="font-26 font-4E4E4E font-bold">中恒云仓</text>
					<view class="mt-20">
						<text class="display-inline font-4E4E4E font-24">中恒自营仓库，保证库存真实，付款后自动转货权；在APP上可以办理云仓仓储业务。</text>
					</view>
				</view>
			</view>
			<view class="content display-flex align-start">
				<view class="left">
					<text class="font-FF661B dot">•</text>
				</view>
				<view class="right">
					<text class="font-26 font-4E4E4E font-bold">自有仓</text>
					<view class="mt-20">
						<text class="display-inline font-4E4E4E font-24">供应商自有存货仓库，非中恒云仓。</text>
					</view>
				</view>
			</view>
			<view class="sub-title display-flex align-center">
				<image src="@/static/icons/purchase_trade_icon.png" class="purchase-home-icon"/>
				<text class="font-30 font-bold font-302D2D ml-15">交易流程</text>
			</view>
			<view class="flow">
				<view class="flow-item">1.添加到购物车</view>
				<image src="" class="flow-arrow"/>
				<view class="flow-item">2.提交下单</view>
				<image src="" class="flow-arrow"/>
				<view class="flow-item">3.平台确认订单</view>
				<image src="" class="flow-arrow"/>
				<view class="flow-item">4.买家付款</view>
				<image src="" class="flow-arrow"/>
				<view class="flow-item">5.平台收款</view>
				<image src="" class="flow-arrow"/>
				<view class="flow-item">6.提货</view>
				<image src="" class="flow-arrow"/>
				<view class="flow-item">7.交易完成</view>
			</view>
			<view class="sub-title display-flex align-center">
				<image src="@/static/icons/purchase_pay_icon.png" class="purchase-home-icon"/>
				<text class="font-30 font-bold font-302D2D ml-15">支付方式</text>
			</view>
			<view class="content display-flex align-start">
				<view class="left">
					<text class="font-FF661B dot">•</text>
				</view>
				<view class="right">
					<text class="font-26 font-4E4E4E font-bold">线下银行转账</text>
					<view class="mt-20">
						<text class="display-inline font-4E4E4E font-24">买家线下银行转账后，在平台确认付款，并提供付款凭证。</text>
					</view>
				</view>
			</view>
			<view class="content display-flex align-start">
				<view class="left">
					<text class="font-FF661B dot">•</text>
				</view>
				<view class="right">
					<text class="font-26 font-4E4E4E font-bold">在线支付</text>
					<view class="mt-20">
						<text class="display-inline font-4E4E4E font-24">暂未开通，敬请期待。</text>
					</view>
				</view>
			</view>
		</view>
		<view class="purchase-bottom display-flex justify-between align-center">
			<view class="font-302D2D font-26 mt-15 flex display-flex align-center">
				<image src="@/static/icons/service_icon.png" class="service_icon" @click="openServiceLink"></image>
				<view class="purchase-icon">
					<image src="@/static/icons/purchase_car_icon.png" class="purchase-car-icon" @click="switchTab('/pages/shop/shoppingCart')"></image>
					<view class="mark" v-if="Number(shoppingCartTotal)">
						<u-mark type="plain" size="36" color="#EC1010" maxValue="9" :fontSize="28" :value="shoppingCartTotal" ></u-mark>
					</view>
					
				</view>
			</view>
			<view class="display-flex align-center">
				<button class="button-left font-28" @click="addShoppingCart">加入购物车</button>
				<button class="button-right font-28 ml-20" @click="goPurchase">立即购买</button>
			</view>
			<u-bottom-fit></u-bottom-fit>
		</view>
		
		<weight-edit-popup :show="showWeightPopup" :data="goodsData.detail" @close="closeWeightPopup" @sure="shoppingCartWeightSure"></weight-edit-popup>
		<service-link :show="showServiceLink" @close="changeServiceLink" @link="linkService"></service-link>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue'
	import { goods } from '@/api'
	import type { GoodsDetailData } from '@/@type/goods'
	import { onLoad, onShareAppMessage } from '@dcloudio/uni-app';
	import { util, tip, nav } from '@/utils'
	import weightEditPopup from '@/pages/shop/components/weight-edit-popup'
	import serviceLink from '@/pages/components/service-link'
	
	const showWeightPopup = ref(false)
	const shoppingType = ref('')
	const showServiceLink = ref(false)
	const shoppingCartTotal = ref('')
	const goodsData: any = reactive({
		query:{
			spckid:"",
			spcwid:"",
			spbhid:""
		},
		detail:{
			fileDataList:[],
			spzs:"",
			price:0,
			ssrqid:0,
			shen:"",
			shi: "",
			startingWeight: "",
			upShelvesWeight: "",
			spjsl: "",
			spckmc: "",
			spcd:"",
			wpggA: "",
			wpggB: "",
			wpggC: "",
			wpggD: "",
			wpggE: "",
			wpggF: "",
			wpggH: "",
			remark: "",
		}
	})
	
	onLoad((option) => {
		goodsData.query = option
		goodsDetail()
		if(nav.isLogin()) {
			shoppingCart()
		}
	})
	
	onShareAppMessage(() => {})
	
	const shoppingCart = () => {
		goods.getShoppingCart({}).then((res:any) => {
			const len = res.data && res.data.length > 9?'9+': res.data.length.toString()
			shoppingCartTotal.value = len
		})
	}
	
	const goodsDetail = () => {
		goods.getGoodsDetail(goodsData.query).then((res:any) => {
			const data = res.data
			data.startingWeight = data.startingWeight?data.startingWeight:0
			data.updateTime = data.updateTime?util.getDate(data.updateTime):""
			goodsData.detail = data
		})
	}
	
	const addShoppingCart = () => {
		if(nav.isCertify()) {
			goodsData.detail.weight = goodsData.detail.upShelvesWeight
			shoppingType.value = 'addCart'
			changeWeightPopup()
		}
		
	}
	
	const goPurchase = () => {
		if(nav.isCertify()) {
			goodsData.detail.weight = goodsData.detail.upShelvesWeight
			shoppingType.value = 'nowBuy'
			changeWeightPopup()
		}
	}
	
	const closeWeightPopup = () => {
		changeWeightPopup()
	}
	
	const changeWeightPopup = () => {
		showWeightPopup.value = !showWeightPopup.value
	}
	
	const shoppingCartWeightSure = (data:any) => {
		changeWeightPopup()
		shoppingCartAdd(data)
	}
	
	const shoppingCartAdd = (data:any) => {
		if(shoppingType.value == 'addCart') {
			goods.setShoppingCartAdd(data).then(() => {
				shoppingCart()
				tip.showToast('成功加入购物车！')
				// uni.showModal({
				// 	title:'添加购物车',
				// 	content:'添加成功',
				// 	confirmColor:'#1769ff',
				// 	confirmText:'去结算',
				// 	success:(res:any) => {
				// 		if(res.confirm) {
				// 			switchTab('/pages/shop/shoppingCart')
				// 		}
				// 	}
				// })
			})
		} else if(shoppingType.value == 'nowBuy'){
			if(nav.hasAppRole()) {
				goods.setShoppingCartAdd(data).then(() => {
					shoppingCart()
					const info = [{
						...goodsData.detail,
						...data
					}]
					navigateTo('/pages/shop/shoppingCartSure?info=' + encodeURIComponent(JSON.stringify(info)))
				})
			}
			
		}
		
	}
	
	const openServiceLink = () => {
		changeServiceLink()
	}
	
	const changeServiceLink = () => {
		showServiceLink.value = !showServiceLink.value
	}
	
	const linkService = () => {
		uni.makePhoneCall({
			phoneNumber:"0757-82138330",
			success:() => {
				console.log('成功')
			},
			fail:() => {
				
			}
		})
	}
	
	const switchTab = (url:string) => {
		uni.switchTab({url:url})
	}
	
	const navigateTo = (url:string) => {
		uni.navigateTo({url:url})
	}
	
	const previewImg = (url:string) => {
		return util.previewImg(url)
	}
	
</script>

<style lang="scss" scoped>
	.zh-goods-detail {
		padding-bottom: 144rpx;
		.cover-img {
			text-align:center;
			width: 750rpx;
			height:750rpx;
			background-color:$uni-bg-color-grey;
			.swiper {
				width:100%;
				height:100%;
				.banner {
					width:750rpx;
					height:750rpx;
				}
			}
		}
		.detail {
			padding:70rpx 30rpx 40rpx;
			background-color:$uni-bg-card-color;
			.top {
				.top-tags {
					padding:0 12rpx;
					height:35rpx;
					line-height: 35rpx;
					background-color:#FFF1EA;
					border-radius: 4rpx;
					color:#FF661B;
					font-size:22rpx;
				}
			}
			.center {
				margin-top: 45rpx;
				.center-tags {
					width: 60rpx;
					height:28rpx;
					text-align:center;
					display: flex;
					justify-content: center;
					align-items: center;
					background: linear-gradient(90deg, #1769FF, #3795FF);
					border-radius: 4rpx;
					color:#fff;
				}
			}
		}
		.sku {
			padding:45rpx 30rpx;
			margin-top: 20rpx;
			background-color:$uni-bg-card-color;
			.item {
				width: 50%;
				margin-top: 30rpx;
				.name {
					display:inline-block;
					width:90rpx;
				}
			}
		}
		.content {
			margin-top: 20rpx;
			background-color:$uni-bg-card-color;
			.title {
				padding:45rpx 30rpx 30rpx;
			}
			.des {
				padding:30rpx;
				font-size:28rpx;
				image {
					width:100%;
				}
			}
			
		}
		.intro {
			padding:45rpx 30rpx;
			margin-top: 20rpx;
			background-color:$uni-bg-card-color;
			.title {
				padding-top:45rpx;
			}
			.sub-title {
				padding-top: 30rpx;
			}
			.purchase-home-icon {
				width: 34rpx;
				height: 30rpx;
			}
			.content {
				.left {
					margin-left:10rpx;
					.dot {
						width:34rpx;
					}
				}
				.right {
					margin-left: 30rpx;
					.owns-tags {
						width: 60rpx;
						height:28rpx;
						line-height: 28rpx;
						background-color:#267CF8;
						border-radius: 4rpx;
						color:#fff;
						font-size:18rpx;
					}
				}
				
			}
			.flow {
				padding: 30rpx 40rpx 50rpx;
				.flow-item {
					display:inline-block;
					padding:0 10rpx;
					height: 46rpx;
					line-height: 46rpx;
					background-color: #EFF0F4;
					border-radius: 4rpx;
					font-size: 22rpx;
					color:#4E4E4E;
					border-radius: 4rpx;
					margin-bottom:20rpx;
				}
				.flow-arrow {
					width:22rpx;
					height: 22rpx;
					margin:0 6rpx;
				}
			}
		}
		.purchase-bottom {
			position:fixed;
			bottom:0;
			left:0;
			right:0;
			padding:13rpx 30rpx 13rpx 33rpx;
			background-color: $uni-bg-card-color;
			.purchase-icon {
				position:relative;
				.mark {
					position:absolute;
					right:-13rpx;
					top:-13rpx;
				}
				.purchase-car-icon {
					width: 64rpx;
					height: 53rpx;
					margin-left: 35rpx;
				}
			}
			.service_icon {
				width: 54rpx;
				height: 53rpx;
			}
			
			.button-left {
				width: 214rpx;
				height:88rpx;
				line-height: 88rpx;
				color:#fff;
				background-color:#FFA944;
			}
			.button-right {
				width: 214rpx;
				height:88rpx;
				line-height: 88rpx;
				color:#fff;
				background-color:#FF661B;
			}
		}
	}
</style>
